<template>
  <div id="root">
    <div id="login-box">
      <div id="logo-box">
        <img src="@/assets/logo-whole.png" alt="">
      </div>
      <div id="form-box">
        <el-form :model="formModel" :rules="formRules" ref="formRef" status-icon>
          <div id="welcome-div">库赞考试系统</div>
          <el-form-item prop="userId">
            <el-input prefix-icon="el-icon-user" placeholder="请输入账号"
                      v-model.number="formModel.userId"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" show-password placeholder="请输入密码"
                      v-model.trim="formModel.password"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input prefix-icon="el-icon-lock" show-password placeholder="请确认密码"
                      v-model.trim="formModel.confirmPass"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="sub-btn" type="primary" @click="submit">注册</el-button>
          </el-form-item>
          <div id="jump-box">
            <div class="jump-page">
              已经有账号了？点我<span @click="$router.push('/')">登录</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Register",
  data() {
    // 二次密码验证
    const validatePassword = (rule, value, callback) => {
      if (value !== this.formModel.password) {
        callback(new Error('两次密码不一致'));
      } else {
        callback();
      }
    }
    return {
      // 表单收集的数据
      formModel: {
        userId: '',
        password: '',
        confirmPass: '',
      },
      // 表单输入规则
      formRules: {
        userId: [
          {type: 'number', required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {type: 'string', required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 12, message: '长度为 5 到 12 个字符', trigger: 'blur'},
        ],
        confirmPass: [
          {type: 'string', required: true, message: '请确认密码', trigger: 'blur'},
          {validator: validatePassword, trigger: 'blur'},
        ]
      },
    }
  },
  computed: {
    // 将表单数据封装成user对象
    user() {
      return {
        userId: this.formModel.userId,
        password: this.formModel.password,
      }
    }
  },
  methods: {
    submit() {
      // 我猜validate方法是el-form的方法
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          const url = '/admin/index/users';
          this.axios.post(url, this.user).then(resp => {
            if (resp.code === 200) {
              // 响应成功
              this.$message({
                type: "success",
                message: '注册成功',
                center: true,
              });
              this.$router.push('/login');
            } else {
              // 响应失败
              this.$message({
                type: "error",
                message: resp.message,
                showClose: true,
                center: true,
              })
            }
          })
        } else {
          console.log('输入有误，请检查！');
          return false;
        }
      });
    },
  },
}
</script>

<style scoped>
#root {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, cornflowerblue, ghostwhite)
}

#login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
  width: 50em;
  height: 25em;
  border-radius: 0.5em;
}

#logo-box {
  flex: 1;
  margin-left: 1em;

  img {
    width: 100%;
  }
}

#form-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-form {
  width: 80%;
  height: 100%;
}

#welcome-div {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.25em;
}

.sub-btn {
  width: 100%;
}

#jump-box {
  display: flex;
}

.jump-page {
  flex: 3;

  span {
    color: #409eff;
    cursor: pointer;
  }
}

</style>